<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue.js 组件传值</title>
        
        <script src="../../../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <son @giftfromson="showGift"></son>
            <ul>
                <li v-for="(gift,i) in gifList" :key="gift.id">{{ gift.value }}{{ gift.name }}</li>
            </ul>
        </div>
        
        <template id="son">
            <button @click="sendGift">儿子送的礼物</button>
        </template>
        
        <script>
            var son = {
                template: '#son',
                data() {
                    return {
                        msg: '儿子说',
                        gifts: [
                            { name: '微风', value: '阵阵', id: 1},
                            { name: '白云', value: '朵朵', id: 2},
                            { name: '泥香', value: '淡淡', id: 3}
                        ]
                    }
                },
                methods: {
                    sendGift() {
                        this.$emit('giftfromson', this.gifts);
                    }
                }
            };
            new Vue({
                el: '#app',
                data: {
                    gifList: []
                },
                methods: {
                    showGift(gifts) {
                        this.gifList = gifts;
                    }
                },
                components: {
                    son
                }
            });
        </script>
    </body>
</html>